<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2017/1/22
  Time: 14:18
  To change this template use File | Settings | File Templates.
--%>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<html>
<head>
    <title>获取摄像头数据</title>
    <script>
        (function(){
            if(navigator.getUserMedia ||
                    (navigator.getUserMedia = navigator.mozGetUserMedia ||  navigator.webkitGetUserMedia || navigator.msGetUserMedia)){
                alert("bb");
                /*
                getUserMedia(streams, success, error);
                含义如下：
                streams：表示包括哪些多媒体设备的对象
                success：回调函数，获取多媒体设备成功时调用
                error：回调函数，获取多媒体设备失败时调用

                 如果网页使用了getUserMedia，浏览器就会询问用户，是否许可提供信息。如果用户拒绝，就调用回调函数onError。
                 发生错误时，回调函数的参数是一个Error对象，它有一个code参数，取值如下：
                 PERMISSION_DENIED：用户拒绝提供信息。
                 NOT_SUPPORTED_ERROR：浏览器不支持指定的媒体类型。
                 MANDATORY_UNSATISHIED_ERROR：指定的媒体类型未收到媒体流
                 PermissionDeniedError 没有权限错误

                */
                navigator.getUserMedia({
                    video: true
                }, function(stream){
                    alert("success");
                    var video = document.getElementById('webcam');
                    if (window.URL) {
                        video.src = window.URL.createObjectURL(stream);
                    } else {
                        video.src = stream;
                    }
                    video.autoplay = true;
                }, function(msg){
                    console.log(msg)
                    alert("error");
                });
            }else{
                alert("你的浏览器不支持录制");
            }

        })();

        /*读取流下载 */
        function saveFile(blob) {
            var link = document.createElement('a');
            link.href = window.URL.createObjectURL(blob);
            link.download = 'File Name';
            link.click();
        };

        /*将流连接到自己的设备 */
        function gotStream(stream) {
            window.AudioContext = window.AudioContext || window.webkitAudioContext;
            var audioContext = new AudioContext();

            // Create an AudioNode from the stream
            var mediaStreamSource = audioContext.createMediaStreamSource(stream);

            // Connect it to destination to hear yourself
            // or any other node for processing!
            mediaStreamSource.connect(audioContext.destination);
        }
       // navigator.getUserMedia({audio:true}, gotStream);


        /*
         通过浏览器捕获声音，相对复杂，需要借助Web Audio API。
        */
        function onSuccess(stream) {
            //创建一个音频环境对像
            audioContext = window.AudioContext || window.webkitAudioContext;
            context = new audioContext();
            //将声音输入这个对像
            audioInput = context.createMediaStreamSources(stream);
            //设置音量节点
            volume = context.createGain();
            audioInput.connect(volume);
            //创建缓存，用来缓存声音
            var bufferSize = 2048;
            // 创建声音的缓存节点，createJavaScriptNode方法的
            // 第二个和第三个参数指的是输入和输出都是双声道。
            recorder = context.createJavaScriptNode(bufferSize, 2, 2);

            // 录音过程的回调函数，基本上是将左右两声道的声音
            // 分别放入缓存。
            recorder.onaudioprocess = function(e){
                console.log('recording');
                var left = e.inputBuffer.getChannelData(0);
                var right = e.inputBuffer.getChannelData(1);
                // we clone the samples
                leftchannel.push(new Float32Array(left));
                rightchannel.push(new Float32Array(right));
                recordingLength += bufferSize;
            }
            // 将音量节点连上缓存节点，换言之，音量节点是输入
            // 和输出的中间环节。
            volume.connect(recorder);
            // 将缓存节点连上输出的目的地，可以是扩音器，也可以
            // 是音频文件。
            recorder.connect(context.destination);

        }


    </script>
</head>
<body>
    <video id="webcam" width="100%" height="100%"></video>


</body>
</html>
